  // 入口函数
  $(function () {

      //删除
      $(".biger").on("click",".del",function(){
        $(this).parent().parent().remove();
   });

      $(".btn1").on("click", function () {
          if ($(".add_big").css("display") == "none") {

              $(".add_big").fadeIn(500);


          } else {


              if ($(".add_name").val() && $(".add_age").val() && $(".add_phone").val() && $(".add_email").val()) {

                  //获取select框中的值
                  var gender = $(".sel_sex").val();
                  // 判断当gender为0时返回男为1时返回女
                  if (+gender == 0) {
                      gender = "男";
                  } else if (+gender == 1) {
                      gender = "女";
                  }


                  if ($(".add_ul_2") == true) {

                      //用after在ul之后添加我们要添加的ul
                      $(".add_ul_2").after("<ul class='add_ul_2'>" +
                          "<li><input type='checkbox'></li>" +
                          "<li class ='nameId'>" + $(".add_name").val() + "</li>" +
                          "<li>" + gender + "</li>" +
                          "<li>" + $(".add_age").val() + "</li>" +
                          "<li>" + $(".add_phone").val() + "</li>" +
                          "<li>" + $(".add_email").val() + "</li>" +
                          "<li><a href='javascript:void(0)' class='updata'>修改</a>|" +
                          "<a href='javascript:void(0)' class='del'>删除</a></li>" +
                          "</ul>");
                  } else {
                      $(".add_ul_1").after("<ul class='add_ul_2'>" +
                          "<li><input type='checkbox'></li>" +
                          "<li class ='nameId'>" + $(".add_biger div:eq(0) input").val() + "</li>" +
                          "<li>" + gender + "</li>" +
                          "<li>" + $(".add_biger div:eq(2) input").val() + "</li>" +
                          "<li>" + $(".add_biger div:eq(3) input").val() + "</li>" +
                          "<li>" + $(".add_biger div:eq(4) input").val() + "</li>" +
                          "<li><a href='javascript:void(0)' class='updata'>修改</a>|" +
                          "<a href='javascript:void(0)' class='del'>删除</a></li>" +
                          "</ul>");
                  }

            //                     //jquery删
            //   $(".del").click(function () {
            //     var dels = confirm("亲，您确定要删除吗？");
            //     if (dels == true) {
            //         //这个this指代这个对象自己，第一个parent找到删除a标签上的父级元素li，第二个parent找到ul。来进行删除操作；
            //         $(this).parent().parent().remove();
            //     };
            // });
                  ////////////////////

                  
                  $(".updata").click(function () {
                    //   console.log($(this));
                      // //////////////////
                      if ($(".add_big").css("display") == "none") {
                          $(".add_big").fadeIn(500);
                          //获取页面中的姓名值框
                          var updata_name = $(this).parent().prev().prev().prev().prev().prev().text();

                        //   console.log(updata_name);
                          //页面中的姓名值付给input框中
                          var updata_input_name = $(".add_name").val(updata_name);
                          // console.log(updata_input_name);


                          //获取页面中的性别值框
                          var updata_sex = $(this).parent().prev().prev().prev().prev().text();

                        //   console.log(updata_sex);
                          //判断男女0、1;
                          var gender = $(".sel_sex").val(); //获取下拉框中的男女值
                          // console.log(gender);
                          if (updata_sex == "男") {
                              gender = "男";
                          } else if (updata_sex == "女") {
                              gender = "女";
                          }

                          //获取页面中的年龄框中的值
                          var updata_age = $(this).parent().prev().prev().prev().text();

                        //   console.log(updata_age);
                          var updata_input_age = $(".add_age").val(updata_age);

                          //获取页面中的手机框中的值
                          var updata_phone = $(this).parent().prev().prev().text();
                        //   console.log(updata_phone);
                          var updata_input_phone = $(".add_phone").val(updata_phone);

                          //获取页面中的邮箱中的值
                          var updata_email = $(this).parent().prev().text();

                        //   console.log(updata_email);
                          var updata_input_email = $(".add_email").val(updata_email);

                      } else {
                          updata_name = $(".add_name").val();
                          // console.log(updata_name);

                          updata_age = $(".add_age").val();
                          // console.log(updata_age);


                          updata_phone = $(".add_phone").val();
                          // console.log(updata_phone);

                          updata_email = $(".add_email").val();
                          // console.log(updata_email);

                          var gender = $(".sel_sex").val();
                          // console.log(gender);
                          // console.log(updata_sex);
                          if (+gender == 0) {
                              updata_sex = "男";
                          } else if (+gender == 1) {
                              updata_sex = "女";
                          }

                          var $add_ul_2 = $(this).parent().parent();
                          console.log($add_ul_2);

                          $add_ul_2.replaceWith("<ul class='add_ul_2'>" +
                              "<li><input type='checkbox'></li>" +
                              "<li>" + updata_name + "</li>" +
                              "<li>" + updata_sex + "</li>" +
                              "<li>" + updata_age + "</li>" +
                              "<li>" + updata_phone + "</li>" +
                              "<li>" + updata_email + "</li>" +
                              "<li><a href='javascript:void(0)' class='updata'>修改</a>|" +
                              "<a href='javascript:void(0)' class='del'>删除</a></li>" +
                              "</ul>");

                          updata_name = $(".add_name").val();
                          // console.log(updata_name);

                          updata_age = $(".add_age").val();
                          // console.log(updata_age);


                          updata_phone = $(".add_phone").val();
                          // console.log(updata_phone);

                          updata_email = $(".add_email").val();
                      }

                      // //////////////////
                  })
                  //////////////

                  //添加完成后清空input框中的value值
                  $("input").val("");
                  $(".add_big").fadeOut(500);

              } else {
                  $("#all_ts").fadeIn(500);
                  $("#all_ts").text("请将内容填写完整");
              }


            //   //jquery删
            //   $(".del").click(function () {
            //       var dels = confirm("亲，您确定要删除吗？");
            //       if (dels == true) {
            //           //这个this指代这个对象自己，第一个parent找到删除a标签上的父级元素li，第二个parent找到ul。来进行删除操作；
            //           $(this).parent().parent().remove();
            //       };
            //   });
          }
      });


      //修改
      $(".biger").on("click", ".updata", function () {
        // //////////////////
        //   console.log(this);
          update_ul = $(this).parent().parent()
        //   console.log(update_ul);
      //   console.log($(this));
        if ($(".add_big").css("display") == "none") {
            $(".add_big").fadeIn(500);
            //获取页面中的姓名值框
            var updata_name = $(this).parent().prev().prev().prev().prev().prev().text();

          //   console.log(updata_name);
            //页面中的姓名值付给input框中
            var updata_input_name = $(".add_name").val(updata_name);
          //   console.log(updata_input_name);


            //获取页面中的性别值框
            var updata_sex = $(this).parent().prev().prev().prev().prev().text();

          //   console.log(updata_sex);
            //判断男女0、1;
            var gender = $(".sel_sex").val(); //获取下拉框中的男女值
            // console.log(gender);
            if (updata_sex == "男") {
                gender = "男";
            } else if (updata_sex == "女") {
                gender = "女";
            }

            //获取页面中的年龄框中的值
            var updata_age = $(this).parent().prev().prev().prev().text();

          //   console.log(updata_age);
            var updata_input_age = $(".add_age").val(updata_age);

            //获取页面中的手机框中的值
            var updata_phone = $(this).parent().prev().prev().text();
          //   console.log(updata_phone);
            var updata_input_phone = $(".add_phone").val(updata_phone);

            //获取页面中的邮箱中的值
            var updata_email = $(this).parent().prev().text();

          //   console.log(updata_email);
            var updata_input_email = $(".add_email").val(updata_email);

        } else {
            updata_name = $(".add_name").val();
            // console.log(updata_name);

            updata_age = $(".add_age").val();
            // console.log(updata_age);

            updata_phone = $(".add_phone").val();
            // console.log(updata_phone);

            updata_email = $(".add_email").val();
            // console.log(updata_email);

            var gender = $(".sel_sex").val();
            // console.log(gender);
            // console.log(updata_sex);
            if (+gender == 0) {
                updata_sex = "男";
            } else if (+gender == 1) {
                updata_sex = "女";
            }
            $(update_ul).replaceWith("<ul class='add_ul_2'>" +
                "<li><input type='checkbox'></li>" +
                "<li>" + updata_name + "</li>" +
                "<li>" + updata_sex + "</li>" +
                "<li>" + updata_age + "</li>" +
                "<li>" + updata_phone + "</li>" +
                "<li>" + updata_email + "</li>" +
                "<li><a href='javascript:void(0)' class='updata'>修改</a>|" +
                "<a href='javascript:void(0)' class='del'>删除</a></li>" +
                "</ul>");

            updata_name = $(".add_name").val();
            // console.log(updata_name);

            updata_age = $(".add_age").val();
            // console.log(updata_age);


            updata_phone = $(".add_phone").val();
            // console.log(updata_phone);

            updata_email = $(".add_email").val();
        }

        // //////////////////  
        //  
    })
      $(".add_big").on("click", ".btn2", function () {
        
          if ($(".add_big").css("display") == "block") {
            
              updata_name = $(".add_name").val();
            //   console.log(updata_name);

              updata_age = $(".add_age").val();
              // console.log(updata_age);


              updata_phone = $(".add_phone").val();
              // console.log(updata_phone);

              updata_email = $(".add_email").val();
              // console.log(updata_email);

              var gender = $(".sel_sex").val();
              // console.log(gender);
              // console.log(updata_sex);
              if (+gender == 0) {
                  updata_sex = "男";
              } else if (+gender == 1) {
                  updata_sex = "女";
              }

              $(update_ul).replaceWith("<ul class='add_ul_2'>" +
                  "<li><input type='checkbox'></li>" +
                  "<li>" + updata_name + "</li>" +
                  "<li>" + updata_sex + "</li>" +
                  "<li>" + updata_age + "</li>" +
                  "<li>" + updata_phone + "</li>" +
                  "<li>" + updata_email + "</li>" +
                  "<li><a href='javascript:void(0)' class='updata'>修改</a>|" +
                  "<a href='javascript:void(0)' class='del'>删除</a></li>" +
                  "</ul>");

              updata_name = $(".add_name").val();
              // console.log(updata_name);

              updata_age = $(".add_age").val();
              // console.log(updata_age);


              updata_phone = $(".add_phone").val();
              // console.log(updata_phone);

              updata_email = $(".add_email").val();
              // console.log(updata_email);
              $(".add_big").fadeOut(500);
          }
      })
      var update_ul = ''
 
      //////////////

        // $(".del").click(function () {
        //     var dels = confirm("亲，您确定要删除吗？");
        //     if (dels == true) {
        //         //这个this指代这个对象自己，第一个parent找到删除a标签上的父级元素li，第二个parent找到ul。来进行删除操作；
        //         $(this).parent().parent().remove();
        //     };
        // });





      //正则内容
      //验证用户名
      function checkUsername() {
          // 获取用户名值
          var username = $("#username").val();
          if (username == "") {
              $("#username").css("border", "2px solid red");
              $("#error_name").text("姓名不能为空！").fadeIn(500);
          } else {
              // console.log(username);
              var reg_username = /^[\u4e00-\u9fa5]{2,4}$/;

              var flag = reg_username.test(username);
              if (flag) {

                  $("#username").css("border", "2px solid green");
                  $("#error_name").text("姓名可行！").fadeIn(500);
              } else {

                  $("#username").css("border", "2px solid red");
                  $("#error_name").text("请输入2-4位汉字！").fadeIn(500);
              }
          }
          return flag;
      };

      $("#username").blur(checkUsername);

      //验证年龄
      function checkUserage() {
          // 获取用户年龄
          var userage = $("#userage").val();
          if (userage == "" && userage == 0) {
              $("#userage").css("border", "2px solid red");
              $("#error_age").text("年龄不能为空！").fadeIn(500);
          } else {
              var reg_userage = /^\w{1,3}$/;

              var flag = reg_userage.test(userage);
              if (flag) {

                  $("#userage").css("border", "2px solid green");
                  $("#error_age").text("年龄可行！").fadeIn(500);
              } else {

                  $("#userage").css("border", "2px solid red");
                  $("#error_age").text("请输入正确的年龄").fadeIn(500);
              }
          }
          return flag;
      };

      $("#userage").blur(checkUserage);

      //验证手机
      function checkPhone() {
          // 获取手机号
          var telephone = $("#phone").val();
          if (telephone == "") {
              $("#phone").css("border", "2px solid red");
              $("#error_phone").text("手机不能为空！").fadeIn(500);
          } else {
              var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;

              var flag = reg_tel.test(telephone);
              if (flag) {
                  $("#phone").css("border", "2px solid green");
                  $("#error_phone").text("手机格式符合规格").fadeIn(500);
              } else {
                  $("#phone").css("border", "2px solid red");
                  $("#error_phone").text("手机格式不符合规格").fadeIn(500);
              }
          }

          return flag;
      };
      $("#phone").blur(checkPhone);

      //验证邮箱
      function checkEmail() {
          //获取邮箱
          var email = $("#email").val();
          if (email == "") {
              $("#email").css("border", "2px solid red");
              $("#error_email").text("邮箱不能为空！").fadeIn(500);
          } else {
              var reg_email = /^\w+@\w+\.\w+$/;

              var flag = reg_email.test(email);
              if (flag) {
                  $("#email").css("border", "2px solid green");
                  $("#error_email").text("邮箱格式符合规格！").fadeIn(500);
              } else {
                  $("#email").css("border", "2px solid red");
                  $("#error_email").text("邮箱格式不符合规格").fadeIn(500);
              }
          }

          return flag;
      };
      $("#email").blur(checkEmail);

      //叉叉
      $(".error").click(function () {
          if ($(".add_big").css("display") == "none") {
              $(".add_big").fadeIn(500);
          } else {
              $(".add_big").fadeOut(500);
          }
      });

      //全选
      $("#selectAll").click(function () {
          $(".add_ul_2 input").each(function () {
              // console.log($(this));
              this.checked = true;
          });
      });
      //全不选
      $("#selectNo").click(function () {
          $(".add_ul_2 input").each(function () {
              this.checked = false;
          });
      })
      //反选
      $("#selectBack").click(function () {
          $(".add_ul_2 input").each(function () {
              this.checked = !this.checked;
          });
      });

      //清空
      $("#clearing").click(function () {
          $(".add_ul_2").html("");
      })

      //查询
      $("#seach").click(function () {
          var ChaXunValue = $("#seaching").val();
          // console.log(ChaXunValue);
          if (ChaXunValue != "") {
              //:contains(text)选择器，该选择器可以让你直接查询结构下的文字元素，通过这样筛选很容易就能实现筛选功能
              $(".add_ul_2 li:contains(" + ChaXunValue + ")").css("background", "palevioletred");
          };
      });



  });